<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layuiAdmin 网站用户 iframe 框</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiAdmin/dist/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/Font-Awesome-master/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/base.css?v={$version}">
    <script src="/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
    <script src="/js/jquery-2.1.1.min.js"></script>
    <style>
        .grid {
            padding: 4px;
        }
        .grid li {
            width: 28px;
            height: 28px;
            line-height: 28px;
            cursor: pointer;
            border: 1px solid #e6e6e6;
            border-top-color: rgb(230, 230, 230);
            border-right-color: rgb(230, 230, 230);
            border-bottom-color: rgb(230, 230, 230);
            border-left-color: rgb(230, 230, 230);
            margin: 4px;
            text-align: center;
            border-radius: 1px;
            -webkit-transition: all .4s ease;
            transition: all .4s ease;
            float: left;
            list-style: none;
        }
        .grid li:hover {
            background: #1E9FFF;
            color: #fff;
            border-color: #1E9FFF;
        }
        .sizing {
            display: none;
            position: absolute;
            left: 0;
            top: 37px;
            width: 100%;
            background: #fff;
            border: 1px solid #D2D2D2;
            border-radius: 0 0 2px 2px;
            box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
            height: 246px;
            overflow: auto;
            z-index: 10;
        }
        .icon_search {
            margin: 8px 8px 0;
        }
        .edui-default .edui-editor{
            z-index: 0 !important;
        }
        .images{
            max-width: 200px;
            max-height: 200px;
        }
    </style>
</head>
<body>

<div class="layui-form" style="padding: 20px 0 0 0;">
    <input type="hidden" name="id" value="{$data.id}">
    <div class="layui-form-item page-row">
        <label class="layui-form-label flex-col-md-3">商品名称</label>
        <div class="layui-input-inline flex-col-md-7">
            <input type="text" name="name" lay-verify="required" value="{$data.name}" placeholder="请输入商品名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-upload page-row" style="margin:20px 30px;">
         <label class="layui-form-label flex-col-md-3"> <button type="button" class="layui-btn" id="test2">轮播图</button> </label>
         
          <blockquote class="layui-elem-quote flex-col-md-7 layui-quote-nm" style="margin-top: 10px;">
            预览图：
            <div class="layui-upload-list" id="demo2"></div>
            <div style="clear:both;">
                {foreach $data.images as $k=>$v}
                <div style="float:left;width:200px;height:200px;margin:10px;padding-bottom:35px;text-align:center;">
                    <img src="{$v}" alt="" class="layui-upload-img images">
                    <button type="button" class="layui-btn layui-btn-primary delete_j" style="margin-top:10px;">删除</button>
                    <input type="hidden" value="{$v}" name="images[]">
                </div>
                {/foreach}
                <div style="clear:both;"></div>
            </div>
         </blockquote>
    </div>
    <div class="layui-form-item page-row">
        <label class="layui-form-label flex-col-md-3">所属类型</label>
        <div class="layui-input-inline flex-col-md-7">
            <select id="select_product_class_id" name="product_class_id" lay-filter="product_class_id" lay-verify="required">
                <option value="">请选择</option>
                {foreach $product_class as $k=>$v}
                <option value="{$v.id}" {if $data.product_class_id == $v.id} selected {/if}>{$v.name}</option>
                {/foreach}
            </select>
        </div>
    </div>
    <div class="layui-form-item page-row" lay-filter="sex">
        <label class="layui-form-label flex-col-md-3">支付类型</label>
        <div class="layui-input-block flex-col-md-7">
            {if $data.type == 1}
            <input type="radio" name="type" value="1" title="在线支付"checked>
            <input type="radio" name="type" value="2" title="货到付款">
            <input type="radio" name="type" value="3" title="在线+货到">
            {elseif $data.type == 2}
            <input type="radio" name="type" value="1" title="在线支付">
            <input type="radio" name="type" value="2" title="货到付款"checked>
            <input type="radio" name="type" value="3" title="在线+货到">
            {else}
            <input type="radio" name="type" value="1" title="在线支付">
            <input type="radio" name="type" value="2" title="货到付款">
            <input type="radio" name="type" value="3" title="在线+货到"checked>
            {/if}
        </div>
    </div>
    <div class="layui-form-item page-row" lay-filter="sex">
        <label class="layui-form-label flex-col-md-3">置顶</label>
        <div class="layui-input-block flex-col-md-7">
            {if $data.is_top == 1}
            <input type="radio" name="is_top" value="1" title="是"checked>
            <input type="radio" name="is_top" value="2" title="否">
            {else}
            <input type="radio" name="is_top" value="1" title="是">
            <input type="radio" name="is_top" value="2" title="否"checked>
            {/if}
        </div>
    </div>
    <div class="layui-form-item page-row" lay-filter="sex">
        <label class="layui-form-label flex-col-md-3">上架</label>
        <div class="layui-input-block flex-col-md-7">
            {if $data.status == 1}
            <input type="radio" name="status" value="1" title="是"checked>
            <input type="radio" name="status" value="2" title="否">
            {else}
            <input type="radio" name="status" value="1" title="是">
            <input type="radio" name="status" value="2" title="否"checked>
            {/if}
        </div>
    </div>
    <div class="layui-form-item page-row">
        <label class="layui-form-label flex-col-md-3"  >默认价格</label>
        <div class="layui-input-inline flex-col-md-1">
            <input type="text" name="jg" value="{$data.jg}" placeholder="请输入价格" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label flex-col-md-1"  >默认成本</label>
        <div class="layui-input-inline flex-col-md-1">
            <input type="text" name="cb" value="{$data.cb}"  placeholder="请输入价格" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label flex-col-md-1"  >默认佣金</label>
        <div class="layui-input-inline flex-col-md-1">
            <input type="text" name="yj" value="{$data.yj}"   placeholder="请输入价格" autocomplete="off" class="layui-input">
        </div>
         <label class="layui-form-label flex-col-md-1"  >默认库存</label>
        <div class="layui-input-inline flex-col-md-1">
            <input type="text" name="kc" value="{$data.kc}"   placeholder="请输入价格" autocomplete="off" class="layui-input">
        </div>
    </div>
    <!--<div class="layui-form-item page-row">-->
    <!--    <label class="layui-form-label flex-col-md-3"  >默认成本</label>-->
    <!--    <div class="layui-input-inline flex-col-md-7">-->
    <!--        <input type="text" name="cb" value="10"  placeholder="请输入价格" autocomplete="off" class="layui-input">-->
    <!--    </div>-->
    <!--</div>-->
    <!--<div class="layui-form-item page-row">-->
    <!--    <label class="layui-form-label flex-col-md-3"  >默认佣金</label>-->
    <!--    <div class="layui-input-inline flex-col-md-7">-->
    <!--        <input type="text" name="yj" value="10"   placeholder="请输入价格" autocomplete="off" class="layui-input">-->
    <!--    </div>-->
    <!--</div>-->
    <!--<div class="layui-form-item page-row">-->
    <!--    <label class="layui-form-label flex-col-md-3"  >默认库存</label>-->
    <!--    <div class="layui-input-inline flex-col-md-7">-->
    <!--        <input type="text" name="kc" value="10"   placeholder="请输入价格" autocomplete="off" class="layui-input">-->
    <!--    </div>-->
    <!--</div>-->
    <div class="page-row" top>
        <div class="flex-col-md-3" >规格</div>
        <div class="layui-card flex-col-md-7">
        <div class="layui-form-item " >
        	<div class="layui-input-inline " style="width: 80%;border: #c2c2c2 solid 1px">
                <div class="layui-row" id="master-spe-box">
                    {foreach $data.specification_key as $k=>$v}
                    <div class="goods-spe-name-val-box">
                        <div class="layui-row spe-row-box" style="margin: 1%;padding:1%;background:#e2e2e2; height: 40px">
                            <div class="layui-col-md1" style="width: 15%;padding-bottom: 1% ;">
                                <label class="layui-form-label ">规格名：</label>
                            </div>
                            <div class="layui-col-md2 spe-name" style="padding-bottom: 1%;">
                                <input type="text" class="layui-input" name="j_spe_name[{$k}]" value="{$v.name}"
                                       style="width: 100%"/>
                                <input type="hidden" name="key_id[{$k}]" value="{$v.id}" />   
                            </div>
                            <button type="button" class="layui-btn layui-btn-danger k_sc" style="margin-left:20px;">删除</button>
                            <input type="hidden"  class="jy_input" name="j_jy[{$k}]" value="{$v.jy_status}" />
                            <button type="button" class="layui-btn jy" style="margin-left:20px;">
                                {if $v.jy_status == 1}
                                禁用该规格
                                {else}
                                已禁用规格
                                {/if}
                            </button>
                        </div>
                        <div class="layui-row spe-val-total-box" >
                            <label class="layui-form-label ">规格值：</label>
                            <div class="layui-input-inline  spe-val-box" style="width: 80%;margin-bottom: 2%;display: inline-block">
                                <div class="layui-col spe-val-class" style="">
                                    {foreach $v.specification_value as $kk=>$vv}
                                    <div class="" style="float:left;position:relative;margin:5px 20px;">
                                    <input type="text" class="layui-input spe-val" name="j_spe_val[{$k}][{$vv.id}]" value="{$vv.name}" style="margin-bottom: 1%;display: inline-block;margin-right: 10px;min-width:100px;"/>
                                    <i class="fa fa-times sc" style="position:absolute;right:-6px;top:-6px;" aria-hidden="true"></i>
                                    <input type="hidden" name="value_id[{$k}][{$kk}]" value="{$vv.id}" />
                                    </div>
                                    {/foreach}
                                </div>
                                <div style="clear:both;"></div>
                                <div class="layui-col spe-val-class">
                                    <input type="button" class="layui-btn layui-btn-primary j_add-spe-val" data_num="{$k}" value="添加"/>
                                </div>
                            </div>
                        </div>
                    </div>
                    {/foreach}
                </div>
                <div style="margin: 1%;padding:1%;background:#e2e2e2;" class="add-spe-button-box">
                    <input type="button" class="layui-btn layui-btn-primary" id="add-spe"
                           value="添加规格"/>
                </div>
            </div>
        </div>
    </div>
    </div>
    <div class="layui-form-item page-row" top style="margin-bottom:20px;">
        <label class="layui-form-label flex-col-md-3">内容</label>
        <div class="layui-input-block flex-col-md-7" style="width: 70%">
            <script id="content_content"  type="text/plain">{$data.content|raw}</script>
            <textarea name="content" id="content_val_content" style="display: none;">{$data.content}</textarea>
        </div>
    </div>
    <div class="layui-form-item page-row layui-hide">
        <input type="button" lay-submit lay-filter="LAY-user-front-submit" id="LAY-user-front-submit" value="确认">
    </div>
</div>

<script>
    $(".jy").on('click',function(){
        var val = $(this).closest('div').find('.jy_input').val();
        console.log(val,999);
        if(val == 1){
            $(this).closest('div').find('.jy_input').val(2)
            $(this).html('已禁用规格');
        }else{
            $(this).closest('div').find('.jy_input').val(1)
            $(this).html('禁用该规格');
        }
    })
    $(".sc").on('click',function(){
        $(this).closest('div').remove();
    })
    $(".k_sc").click(function(){
        $(this).closest('.goods-spe-name-val-box').remove();
    })
    $(".delete_j").on('click',function(){
        $(this).closest('div').remove();
    })
    layui.config({
        base: '/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'upload','layer','layedit'], function () {
        var $ = layui.$
            , form = layui.form
            , upload = layui.upload
            , layedit = layui.layedit;
        upload.render({
            elem: '#test2'
            ,url: "{:url('file_y_d')}" //改成您自己的上传接口
            ,multiple: true
            ,before: function(obj){
              //预读本地文件示例，不支持ie8
              obj.preview(function(index, file, result){
                
              });
            }
            ,done: function(res){
              //上传完毕
                $('#demo2').append('<div style="float:left;width:200px;height:200px;margin:10px;padding-bottom:35px;text-align:center;" id="td_'+res.data.id+'"><img src="'+ res.data.file +'" alt="" class="layui-upload-img images"><button type="button" class="layui-btn layui-btn-primary delete">删除</button><input type="hidden" value="'+res.data.file+'" name="'+"images[]"+'"></div>')
                // let btn = document.getElementById('demo2').getElementsByTagName('button')
                // for(let i=0;i<btn.length;i++){
                //     btn[i].onclick=()=>{
                //         btn[i].parentNode.parentNode.removeChild($('#demo2 .tb').eq(i));
                //         // console.log(btn[i],$(this));
                //     }
                // }
                $("#td_"+res.data.id).find('button').on('click',function(){
                    $(this).closest('div').remove();
                })
                
            }
        });
        
        /**
         * 旧的规格添加规格值
         * 
         */
        $(document).on('click','.j_add-spe-val',function () {
            var _this = $(this);
            var num = _this.attr('data_num');
            var file = '<div class="" style="float:left;position:relative;margin:5px 20px;">'+
                                                '<input type="text" class="layui-input spe-val" name="j_spe_val_add['+num+'][]" value="" style="margin-bottom: 1%;display: inline-block;margin-right: 10px;min-width:100px;"/>'+
                                                '<i class="fa fa-times n_sc" style="position:absolute;right:-6px;top:-6px;" aria-hidden="true"></i>'+
                                                '</div>'
            _this.parents('.spe-val-class').eq(0).prev().prev().append(file);
            $(".n_sc").on('click',function(){
                $(this).closest('div').remove();
            })
        });
        /**
         * 新添加的规格添加规格值
         * 
         */
        $(document).on('click','.add-spe-val',function () {
            var _this = $(this);
            var num = _this.attr('data_num');
            var file = '<div class="" style="float:left;position:relative;margin:5px 20px;">'+
                                                '<input type="text" class="layui-input spe-val" name="spe_val['+num+'][]" value="" style="margin-bottom: 1%;display: inline-block;margin-right: 10px;min-width:100px;"/>'+
                                                '<i class="fa fa-times n_sc" style="position:absolute;right:-6px;top:-6px;" aria-hidden="true"></i>'+
                                                '</div>'
            _this.parents('.spe-val-class').eq(0).prev().prev().append(file);
            $(".n_sc").on('click',function(){
                $(this).closest('div').remove();
            })
        });
        
        var click_num = 1;
        /**
         * 添加规格
         */
        $(document).on('click','#add-spe',function () {
            console.log(123);
           var _this = $(this);
           var add_spe_button_box = _this.parents('.add-spe-button-box').eq(0);
           /**
            * 获取当前要新增的规格是几级
            */
           var spe_level  = TransformToChinese(add_spe_button_box.prevAll().length+1);
           //console.log(spe_level);
           var file = ' <div class="goods-spe-name-val-box">\n' +
               '                                            <div class="layui-row spe-row-box" style="margin: 1%;padding:1%;background:#e2e2e2; height: 40px">\n' +
               '                                                <div class="layui-col-md1" style="width: 15%;padding-bottom: 1% ;">\n' +
               '                                                    <label class="layui-form-label flex-col-md-3">规格名：</label>\n' +
               '                                                </div>\n' +
               '                                                <div class="layui-col-md2 spe-name" style="padding-bottom: 1%;">\n' +
               '                                                    <input type="text" class="layui-input" name="spe_name['+click_num+']" value=""\n' +
               '                                                           style="width: 100%"/>\n' +
               '                                                </div>\n' +
               '<button type="button" class="layui-btn layui-btn-danger n_k_sc" style="margin-left:20px;">删除</button>'+
               '                                            </div>\n' +
               '                                            <div class="layui-row spe-val-total-box" >\n' +
               '                                                <label class="layui-form-label flex-col-md-3">规格值：</label>\n' +
               '                                                <div class="layui-input-inline flex-col-md-7 spe-val-box" style="width: 80%;margin-bottom: 2%;">\n' +
               '<div class="layui-col spe-val-class" style="">\n'+
                                                '<div class="" style="float:left;position:relative;margin:5px 20px;">\n'+
                                                '<input type="text" class="layui-input spe-val" name="spe_val['+click_num+'][]" value="" style="margin-bottom: 1%;display: inline-block;margin-right: 10px;min-width:100px;"/>\n'+
                                                '<i class="fa fa-times n_sc" style="position:absolute;right:-6px;top:-6px;" aria-hidden="true"></i>\n'+
                                                '</div>\n'+
                                            '</div>\n'+
               '<div style="clear:both;"></div>\n'+
               '                                                    <div class="layui-col spe-val-class">\n' +
               '                                                        <input type="button" class="layui-btn layui-btn-primary add-spe-val" data_num="'+click_num+'" value="添加"/>\n' +
               '                                                    </div>\n' +
               '                                                </div>\n' +
               '                                            </div>\n' +
               '                                        </div>';
            _this.parents('.add-spe-button-box').eq(0).before(file);
            click_num++;
            
            $(".n_sc").on('click',function(){
                $(this).closest('div').remove();
            })
            
            $(".n_k_sc").click(function(){
                $(this).closest('.goods-spe-name-val-box').remove();
            })
        });
        //自定义验证
        form.verify({
            nickname: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    return '用户名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '用户名不能全为数字';
                }
            }
            ,number_t:function(value, item){
            	if(value > 30 || value <5){
            		return '不能大于30，小于5';
            	}
            }
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]

            //确认密码
            ,repass: function(value){
                if(value !== $('#LAY_password').val()){
                    return '两次密码输入不一致';
                }
            }
        });
        $('body').on('keyup', '.icon_search_input', function(){
            var keyword  = $.trim($(this).val());
            if (!keyword) {
                $(this).closest('.icon_select_options').find('li').show();
            } else {
                $(this).closest('.icon_select_options').find('li').each(function(){
                    var className = $(this).find('i').attr('class');
                    if (className.indexOf(keyword) >=0) {
                        $(this).show()
                    } else {
                        $(this).hide()
                    }
                })
            }
        })
    })
    function TransformToChinese(num){
    var a = numToChn(num);
    num = Math.floor(num);
    var unitPos = 0;
    var strIns = '', chnStr = '';
    var needZero = false;

    if(num === 0){
        return chnNumChar[0];
    }
    while(num > 0){
        var section = num % 10000;
        if(needZero){
            chnStr = chnNumChar[0] + chnStr;
        }
        strIns = sectionToChinese(section);
        strIns += (section !== 0) ? chnUnitSection[unitPos] : chnUnitSection[0];
        chnStr = strIns + chnStr;
        needZero = (section < 1000) && (section > 0);
        num = Math.floor(num / 10000);
        unitPos++;
    }

    return chnStr+a;
    
}
function numToChn(num){
    var index =  num.toString().indexOf(".");
    if(index != -1){
        var str = num.toString().slice(index);
        var a = "点";
        for(var i=1;i<str.length;i++){
            a += chnNumChar[parseInt(str[i])];
        }
        return a ;
    }else{
        return '';
    }
}
function sectionToChinese(section){
    var str = '', chnstr = '',zero= false,count=0;   //zero为是否进行补零， 第一次进行取余由于为个位数，默认不补零
    while(section>0){
        var v = section % 10;  //对数字取余10，得到的数即为个位数
        if(v ==0){                    //如果数字为零，则对字符串进行补零
            if(zero){
                zero = false;        //如果遇到连续多次取余都是0，那么只需补一个零即可
                chnstr = chnNumChar[v] + chnstr;
            }
        }else{
            zero = true;           //第一次取余之后，如果再次取余为零，则需要补零
            str = chnNumChar[v];
            str += chnUnitChar[count];
            chnstr = str + chnstr;
        }
        count++;
        section = Math.floor(section/10);
    }
    return chnstr;
}
var chnNumChar = ["零","一","二","三","四","五","六","七","八","九"];
var chnUnitSection = ["","万","亿","万亿","亿亿"];
var chnUnitChar = ["","十","百","千"];
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="/plug/UEditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/plug/UEditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
    
    UE.getEditor('content_content',{
        initialFrameHeight:400
    }).ready(function() {
        UE.getEditor('content_content').addListener('contentChange',function(){
            var html = UE.getEditor('content_content').getContent();
            $("#content_val_content").val(html);
        })
    });

</script>
<script>

</script>
</body>
</html>